<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        像素：
            -屏幕是由一个一个发光的小点构成，这一个个小店就是像素
            -分辨率说的是屏幕中小点的数量
            -在前端开发中像素分为两种情况讨论：css像素 和 物理像素
            -物理像素：上述所说的小点点就属于物理像素
            -css像素：在编写网页时，我们所用的像素都是CSS像素
                -浏览器在显示网页时，需要将css像素转换为物理像素然后再实现
                -一个css像素最终由几个物理像素显示，由浏览器决定
                    默认情况下在pc端：1：1

        视口（viewport）
            -视口就是屏幕中用来显示网页的区域
            -通过查看视口的大小，可以查看css像素和物理像素的比例
            -默认情况下：
                视口宽度是1920px(css像素)
                          1920px（物理像素）
                          -此时，css像素和物理像素的比例是1：1


            -放大两倍的情况下：
                视口宽度 960px （css像素）
                        1920px  （物理像素）

            截图工具截的是物理像素
            100px*100px的盒子在视口放大两倍后，截图工具量的200px*200px

            通过改变视口大小来改变css和wuli像素的比值


     -->
</body>
</html>